<template>
  <vxe-modal
    v-model="showPopup"
    ref="vxe-modal"
    class-name="ybs-dialog"
    lock-scroll
    :remember="fullscreen"
    :position="positionCom"
    :loading="loading"
    :title="title"
    :width="width"
    :height="height"
    :fullscreen="fullscreen"
    :destroy-on-close="destroyOnClose"
    :show-confirm-button="showConfirmButton"
    :show-cancel-button="showCancelButton"
    :transfer="transfer"
    :show-header="showHeader"
    :show-footer="showFooter"
    v-bind="options"
    @hide="hide"
  >
    <template #header v-if="$slots.header">
      <slot name="header"></slot>
    </template>
    <template #title>
      <slot name="title">
        <div>{{ title }}</div>
      </slot>
    </template>
    <template #default>
      <slot>
        <div style="height: 160px; background: beige">默认内容区</div>
      </slot>
    </template>
    <template #footer>
      <div class="ybs-dialog-footer flex justify-center gap-5">
        <slot name="footer">
          <vxe-button @click="close" v-if="showCancelButton">
            {{ cancelButtonText }}
          </vxe-button>
          <vxe-button
            status="primary"
            @click="confirm"
            v-if="showConfirmButton"
          >
            {{ confirmButtonText }}
          </vxe-button>
        </slot>
      </div>
    </template>
  </vxe-modal>
</template>

<script>
export default {
  name: 'YDialog',
  props: {
    // 窗口的标题
    title: {
      type: String,
      default: '窗口的标题'
    },
    // 显示确认按钮
    showConfirmButton: {
      type: Boolean,
      default: true
    },
    // 显示取消按钮
    showCancelButton: {
      type: Boolean,
      default: true
    },
    confirmButtonText: {
      type: String,
      default: '确 定'
    },
    cancelButtonText: {
      type: String,
      default: '取 消'
    },

    // 全屏
    fullscreen: {
      type: Boolean,
      default: false
    },
    width: {
      type: [String, Number],
      default: 700
    },
    height: {
      type: [String, Number]
    },
    position: {
      type: Object,
      default: () => ({
        top: 90,
        left: 0
      })
    },
    // 弹窗loading
    loading: {
      type: Boolean,
      default: false
    },
    // 关闭弹窗时 是否销毁内部元素 -- 默认为true , 当弹窗内部使用 el-tab 时需要设置为false
    destroyOnClose: {
      type: Boolean,
      default: true
    },

    transfer: Boolean,
    showHeader: {
      type: Boolean,
      default: true
    },
    showFooter: {
      type: Boolean,
      default: true
    },
    options: Object
  },
  data() {
    return {
      showPopup: false,
      positionLeft: 0
    }
  },
  computed: {
    /**
     * 弹窗定位
     * 此函数根据fullscreen属性确定弹窗的位置
     * 如果是全屏显示，则将弹窗定位在左上角
     * 否则，返回当前的position属性值
     */
    positionCom() {
      if (this.fullscreen) {
        return { left: 0, top: 0 }
      } else {
        return this.position
      }
    }
  },
  mounted() {},
  methods: {
    // 打开弹窗
    open() {
      this.$refs['vxe-modal'].open()
    },
    // 关闭弹窗
    close() {
      this.$refs['vxe-modal'].close()
    },
    // 弹窗关闭后的回调
    hide() {
      this.loading = false
      this.$emit('hide')
    },
    // 点击确认按钮
    confirm() {
      this.$emit('ok', () => {
        this.close()
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
<style>
.ybs-dialog .vxe-modal--footer {
  border-top-width: 1px;
  padding: 0.8em 1em;
}

.ybs-dialog:not(.zoom--maximize) .vxe-modal--box {
  max-height: calc(100% - 180px);
}
</style>
